import React, { useEffect, useMemo, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu } from 'antd';
import { HomeOutlined, AppstoreOutlined, StarOutlined, ProfileOutlined, HddOutlined, SkinOutlined, RobotOutlined, PictureOutlined, UserOutlined, TeamOutlined, CalendarOutlined, SettingOutlined, WalletOutlined, MobileOutlined, AuditOutlined, SmileOutlined, BgColorsOutlined } from '@ant-design/icons';
import './sidebar.css';

export default function Sidebar() {
  const location = useLocation();
  const [openKeys, setOpenKeys] = useState(() => {
    const keys = [];
    if (location.pathname.startsWith('/activity')) keys.push('activity');
    if (location.pathname.startsWith('/device')) keys.push('device');
    if (location.pathname.startsWith('/play')) keys.push('play');
    if (location.pathname.startsWith('/user')) keys.push('user');
    if (location.pathname.startsWith('/account')) keys.push('account');
    return keys;
  });

  useEffect(() => {
    const keys = [];
    if (location.pathname.startsWith('/activity')) keys.push('activity');
    if (location.pathname.startsWith('/device')) keys.push('device');
    if (location.pathname.startsWith('/play')) keys.push('play');
    if (location.pathname.startsWith('/user')) keys.push('user');
    if (location.pathname.startsWith('/account')) keys.push('account');
    setOpenKeys(keys);
  }, [location.pathname]);

  const items = useMemo(() => ([
    {
      key: '/',
      icon: <HomeOutlined />,
      label: <Link to="/">首页</Link>,
    },
    {
      key: 'activity',
      icon: <AppstoreOutlined />,
      label: '活动管理',
      children: [
        {
          key: '/activity/collect',
          icon: <StarOutlined />,
          label: <Link to="/activity/collect">收藏列表</Link>,
        },
        {
          key: '/activity/list',
          icon: <ProfileOutlined />,
          label: <Link to="/activity/list">活动列表</Link>,
        },
      ],
    },
    {
      key: 'device',
      icon: <HddOutlined />,
      label: '设备管理',
      children: [
        {
          key: '/device/list',
          icon: <HddOutlined />,
          label: <Link to="/device/list">设备列表</Link>,
        },
        {
          key: '/device/uv-models',
          icon: <MobileOutlined />,
          label: <Link to="/device/uv-models">UV手机型号管理</Link>,
        },
      ],
    },
    {
      key: 'play',
      icon: <SkinOutlined />,
      label: '玩法管理',
      children: [
        {
          key: '/play/theme',
          icon: <ProfileOutlined />,
          label: <Link to="/play/theme">主题模板</Link>,
        },
        {
          key: '/play/ai',
          icon: <RobotOutlined />,
          label: <Link to="/play/ai">AI玩法模板</Link>,
        },
        {
          key: '/play/postcard',
          icon: <PictureOutlined />,
          label: <Link to="/play/postcard">明信片</Link>,
        },
        {
          key: '/play/emoji',
          icon: <SmileOutlined />,
          label: <Link to="/play/emoji">表情模板</Link>,
        },
        {
          key: '/play/green',
          icon: <BgColorsOutlined />,
          label: <Link to="/play/green">绿幕模板</Link>,
        },
      ],
    },
    {
      key: 'user',
      icon: <UserOutlined />,
      label: '用户管理',
      children: [
        {
          key: '/user/temp',
          icon: <TeamOutlined />,
          label: <Link to="/user/temp">临时用户管理</Link>,
        },
        {
          key: '/user/temp-activity',
          icon: <CalendarOutlined />,
          label: <Link to="/user/temp-activity">临时用户活动</Link>,
        },
      ],
    },
    {
      key: 'account',
      icon: <SettingOutlined />,
      label: '账户管理',
      children: [
        {
          key: '/account/wallet',
          icon: <WalletOutlined />,
          label: <Link to="/account/wallet">钱包</Link>,
        },
        {
          key: '/account/configuration',
          icon: <SettingOutlined />,
          label: <Link to="/account/configuration">账户配置</Link>,
        },
      ],
    },
    {
      key: 'system',
      icon: <AuditOutlined />,
      label: '系统日志',
      children: [
        {
          key: '/system/login-log',
          icon: <UserOutlined />,
          label: <Link to="/system/login-log">登录日志</Link>,
        },
        {
          key: '/system/operation-log',
          icon: <ProfileOutlined />,
          label: <Link to="/system/operation-log">操作日志</Link>,
        },
      ],
    },
  ]), []);

  return (
    <div className="sidebar">
      <Menu
        mode="inline"
        selectedKeys={[location.pathname]}
        openKeys={openKeys}
        onOpenChange={setOpenKeys}
        items={items}
      />
    </div>
  );
}